<template>
  <div>
      <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>{{ cName }}</span>
            </div>
          </template>
          <div class="text item">
            <div style="float: left;">
              <div class="block">
                <el-icon><Timer/></el-icon>
                <span class="demonstration">开始时间</span>
                <el-date-picker
                    v-model="startTime"
                    type="datetime"
                    placeholder="Pick a Date"
                    format="YYYY/MM/DD HH:mm:ss"
                    value-format="YYYY/MM/DD HH:mm:ss"
                    readonly
                />
              </div>
            </div>
            <div style="float: right;">
              <div class="block">
                <el-icon><Timer/></el-icon>
                <span class="demonstration">结束时间</span>
                <el-date-picker
                    v-model="endTime"
                    type="datetime"
                    placeholder="Pick a Date"
                    format="YYYY/MM/DD HH:mm:ss"
                    value-format="YYYY/MM/DD HH:mm:ss"
                    readonly
                />
              </div>
            </div>
          </div>
        <div class="clear" style="clear: both;"></div> <!--清楚浮动-->
        <div class="slider-demo-block">
          <span class="demonstration">
            比赛进度:
          </span>
          <el-slider v-model="timeLine" disabled/>
        </div>
      </el-card>
      <el-tabs type="border-card" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="OverView" name="first">
          公告
          <hr>
          {{ desc }}
        </el-tab-pane>
        <el-tab-pane label="Problem" name="second">
          题目列表
          <Problem :cidId="cid"/>
        </el-tab-pane>
        <el-tab-pane label="Status" name="third">
          提交状态
          <Status :cidId="cid"/>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
import { useRoute, useRouter } from "vue-router"
import Problem from '../components/Problem'
import Status from '../components/Status'
import Moment from 'moment'
import api from "../api/api.js";

export default {
  name: "CompetitionDetail",
  components: {
      Problem,
      Status,
      Moment
  },
  data() {
    const route = useRoute();
    const router = useRouter();
    return {
      activeName: 'second',
      cid: route.query.cid, // 根据cid 发送axios请求然后填充信息
      cName: '',
      startTime: '',
      endTime: '',
      desc: '',
      timeLine: ''
    }
  },
  mounted() {
      api.
        GetCidCompetition({'cid': this.cid})
        .then((res) =>{
            if (res && res.data)
            {
               this.cName = res.data[0].cName;
               this.startTime = res.data[0].startTime;
               this.endTime = res.data[0].endTime;
               this.desc = res.data[0].desc;

               let timestamp1 = Moment().format('YYYY-MM-DD HH:mm:ss');
               timestamp1 = Date.parse(timestamp1);
               let timestart = Date.parse(this.startTime);
               let timeend = Date.parse(this.endTime);
               let result = (timestamp1 - timestart)/ (timeend - timestart);
               if (result < 1)
               {
                 this.timeLine = result * 100;
               }
               else this.timeLine = 100;
            }
        })
  },
  methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
  }
}
</script>

<style scoped>

.card-header {
  font-size: 20px;
  text-align: center;
}

.text {
  font-size: 20px;
  height: 20px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 1500px;
  font-size: 20px;
}

.slider-demo-block {
  display: flex;
  align-items: center;
}

.slider-demo-block .el-slider {
  margin-top: 0;
  margin-left: 0px;
}

.slider-demo-block .demonstration {
  font-size: 20px;
  line-height: 44px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0;
}

.slider-demo-block .demonstration + .el-slider {
  flex: 0 0 70%;
  font-size: 20px;
}

.demo-tabs:deep .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

</style>
